<template>
	<view>
		<view class='keyboard' :class="{noPadding:!isShow}">
			<view class='key-row' v-if="isShow">
				<view class='key-cell' @click.stop='valChange(1)'>1</view>
				<view class='key-cell' @click.stop='valChange(2)'>2</view>
				<view class='key-cell' @click.stop='valChange(3)'>3</view>
				<view class='key-cell last-child' @click.stop="valChange('delete')">
					<image class="icon" src="../../static/fx-amountInput/backspace.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class='key-row' v-if="isShow">
				<view class='key-cell' @click.stop='valChange(4)'>4</view>
				<view class='key-cell' @click.stop='valChange(5)'>5</view>
				<view class='key-cell' @click.stop='valChange(6)'>6</view>
				<view class='key-cell last-child'></view>
			</view>
			<view class='key-row' v-if="isShow">
				<view class='key-cell' @click.stop='valChange(7)'>7</view>
				<view class='key-cell' @click.stop='valChange(8)'>8</view>
				<view class='key-cell' @click.stop='valChange(9)'>9</view>
				<view class='key-cell last-child'></view>
			</view>
			<view class="key-zero-and-point" v-if="isShow">
				<view class="a zero" @click.stop='valChange(0)'>0</view>
				<view class="a point" @click.stop="valChange('.')">.</view>
				<view class='a last-child'></view>
			</view>
			<view class='key-confirm' :class="{big:isShow,frist:fristShow}" :style="{'background':btnColor}"
				@click.stop="valChange('confirm')">
				{{confirmText}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "keyBoard",
		props: {
			confirmText: {
				default: '充值',
				type: String
			},
			btnColor: {
				default: '#2B76EF',
				type: String
			}
		},
		data() {
			return {
				fristShow: true,
				isShow: true,
				size: 0,
				height: 0,
				allWidth: 0,
				money: ''
			}
		},
		methods: {
			show() {
				this.isShow = true;
			},
			hide() {
				this.fristShow = false
				this.isShow = false;
			},
			// 键盘按下
			valChange(num){
				this.$emit("valChange", num)
			}
		}
	}
</script>

<style lang="less" scoped>
	.keyboard {
		flex: 1;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #F5F5F5;
		padding: 20rpx;
		transition: all 0.6s;
		z-index: 9;
		box-sizing: border-box;

		&.noPadding {
			padding: 0;
			bottom: -100%;
		}
	}

	.keyboard .key-row {
		display: flex;
		justify-content: space-between;
		display: -webkit-flex;
		position: relative;
		box-sizing: border-box;
	}

	.keyboard .key-cell {
		font-size: 20px;
		width: 160rpx;
		height: 80rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 8rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		&.last-child {
			width: 170rpx;
		}

		.icon {
			width: 50rpx;
			height: 40rpx;
		}
	}

	.keyboard .key-confirm {
		position: fixed;
		text-align: center;
		width: 170rpx;
		padding: 20rpx 30rpx;
		border-radius: 8rpx;
		box-sizing: border-box;
		color: #FFFFFF;
		z-index: 10;
		right: 20rpx;
		top: calc(100vh - 300rpx);
		bottom: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20px;
		letter-spacing: 4px;
		font-weight: bold;
		transition: all 0.3s;

		&.big {
			right: 20rpx;
			bottom: 20rpx;
			padding: 0 30rpx;
			bottom: 20rpx;
		}

		&.frist {
			position: absolute;
			top: auto;
			right: 20rpx;
			height: 280rpx;
			bottom: 20rpx;
		}
	}

	.key-zero-and-point {
		display: flex;
		height: 80rpx;
		justify-content: space-between;
		align-items: center;
		font-size: 20px;

		.zero {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 340rpx;
			text-align: center;
			background-color: #fff;
			border-radius: 8rpx;
			height: 100%;
		}

		.point {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #fff;
			border-radius: 8rpx;
			width: 160rpx;
			height: 100%;
		}

		.last-child {
			background-color: #fff;
			border-radius: 8rpx;
			width: 170rpx;
			height: 100%;
		}
	}

	.key-cell:active {
		color: white;
		background: black; //黑色
		opacity: 0.1; //这里重要，就是通过这个透明度来设置
	}

	.a:active,
	.key-confirm2:active {
		color: white;
		background: black; //黑色
		opacity: 0.1; //这里重要，就是通过这个透明度来设置
	}

	#input-text {
		width: max-content;
		position: fixed;
		bottom: -200%;
	}
</style>
